<template>
	<navbar title="收货地址" :isBack="true"></navbar>
	<view class="page">
		<view class="" style="padding: 20rpx 24rpx;background-color: white;border-radius: 10rpx;">
			<view class=""
				style="padding-bottom: 20rpx;border-bottom: 1rpx solid #F5F6F8;display: flex;justify-content: space-between;align-items: center;">
				<view class="">
					收货人
				</view>
				<u-input v-model="Info.name" type="text" input-align="right" />
			</view>
			<view class=""
				style="padding-bottom: 20rpx;border-bottom: 1rpx solid #F5F6F8;display: flex;justify-content: space-between;align-items: center;margin-top: 15rpx;">
				<view class="">
					联系电话
				</view>
				<u-input v-model="Info.mobile" type="number" input-align="right" />
			</view>
			<view class=""
				style="padding-bottom: 30rpx;border-bottom: 1rpx solid #F5F6F8;display: flex;justify-content: space-between;align-items: center;margin-top: 30rpx;">
				<view class="">
					所在地址
				</view>
				<view class="" @click="openAddress">
					<!-- "请选择省、市、区、街道" -->
					<span style="color: black;"
						v-if="Info.province && Info.city && Info.area">{{Info.province}}-{{Info.city}}-{{Info.area}}</span>
					<span style="color: #AEAEAE;" v-else>请选择省、市、区、街道</span>
					<u-icon name="arrow-right" color="#696969" size="25"></u-icon>
				</view>
			</view>
			<view class="" style="display: flex;justify-content: space-between;align-items: center;margin-top: 15rpx;">
				<view class="">
					详细地址
				</view>
				<u-input v-model="Info.address" type="text" input-align="right" />
			</view>
		</view>
		<view class=""
			style="margin-top: 20rpx;height: 100rpx;background-color: white;border-radius: 10rpx;padding: 30rpx 25rpx;display: flex;justify-content: space-between;align-items: center;"
			@click="defaultAddress">
			<view class="" style="font-size: 28rpx;">
				设为默认收货地址
			</view>
			<image v-if="!Info.is_default" src="/static/address/default.png" style="width: 40rpx;height: 40rpx;"
				mode=""></image>
			<image v-else src="/static/address/active.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
		</view>
		<view class="" @click="sumbit"
			style="margin-top: 60rpx;border-radius: 10rpx;background: linear-gradient(90deg, #5062A7 0%, #354678 100%);display: flex;justify-content: center;align-items: center;color: white;font-size: 32rpx;height: 100rpx;">
			保存
		</view>
		<w-picker mode="region" :areaCode="['33', '3301', '330108']" :hideArea="false" @confirm="onConfirm"
			ref="regionRef" themeColor="#f00"></w-picker>
	</view>
</template>

<script setup lang="ts">
	import wPicker from '@/components/w-picker/w-picker.vue';
	import { addressDo, addressInfo } from '@/service/api/index'
	import { reactive, ref } from 'vue'
	import tools from '@/utils/tools'
	import { onLoad } from '@dcloudio/uni-app'
	const regionRef = ref<InstanceType<typeof wPicker>>()
	const Info = reactive({
		id: "",
		province: "",
		city: "",
		area: '',
		address: "",
		name: "",
		mobile: "",
		is_default: 0,
	})
	const id = ref('')
	const course_id = ref('')
	const specs = ref('')
	onLoad((options) => {
		if (options.id) {
			id.value = options.id;



			Info.id = id.value;
			getData()
		}

	})
	const getData = async () => {
		const res = await addressInfo({ id: id.value })
		for (let i in Info) {
			Info[i] = res.msg[i];
		}

	}
	//设置默认地址
	const defaultAddress = () => {
		Info.is_default = Info.is_default == 0 ? 1 : 0;
	}

	const onConfirm = (e : any) => {
		//Info.address = e.checkArr[0] + '-' +  e.checkArr[1] + '-' +  e.checkArr[2]
		Info.province = e.checkArr[0]
		Info.city = e.checkArr[1]
		Info.area = e.checkArr[2]

	}
	//保存
	const sumbit = async () => {

		const res = await addressDo(Info);
		if (res.code == 1) {
			// tools.navTo('/pagesB/order/address?id=' + course_id.value + '&specs=' + specs.value,4);
			uni.navigateBack();
		}
		tools.showToast(res.msg);
		//uni.navigateBack();
	}
	const openAddress = () => {
		regionRef.value.show();
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: calc(100vh - 68px);
		background-color: #F8F8F9;
		padding: 20rpx 30rpx 130rpx 20rpx;
		overflow: hidden;
	}
</style>